<template>
  <div class="systemUser-container">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >首页</el-breadcrumb-item>
        <el-breadcrumb-item>人员信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>系统用户管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row><br>
    <el-row>
      <el-form label-width="70px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="用户名" label-width="80px">
              <el-select class="select" v-model="value" filterable placeholder="请选择用户名">
                <el-option
                  v-for="item in options1"ss
                  :key="item.value1"
                  :label="item.label"
                  :value="item.value1">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户权限" label-width="80px">
              <el-select  class="select" v-model="value" filterable placeholder="请选择用户权限">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button class="button"icon="el-icon-search" >搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <el-row>
      <el-button-group style="margin-left: 20px">
        <el-button @click="btnAddClick" type="primary" icon="el-icon-edit">添加</el-button>
        <el-button type="primary" icon="el-icon-share">修改</el-button>
        <el-button  icon="el-icon-delete">删除</el-button>
      </el-button-group>
      <el-table
        :data="tableData"
        border
        stripe
        style="width:100%">
        <el-table-column
          prop="username"
          label="用户名"
          width="180">
          <template slot="header">
            <span><i class="el-icon-user"></i></span>
            <!--<el-tooltip placement="top" popper-class="toolTipClass">-->
            <span class="explain">用户名</span>
            <!-- </el-tooltip>-->
          </template>
        </el-table-column>
        <el-table-column
          prop="permission"
          label="权限">
        </el-table-column>
        <el-table-column
          prop="name"
          label="昵称">
          <!--sortable-->
        </el-table-column>
        <el-table-column
          prop="createtime"
          label="创建时间">
        </el-table-column>
      </el-table>
      <el-pagination
        small
        layout="prev,pager,next"
        :total="5">
      </el-pagination>
    </el-row>
    <el-dialog
      title="系统用户添加"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form>
        <el-form-group>
          <el-form-item label-width="80px" label="用户名">
            <el-input v-model="username"/>
          </el-form-item>
          <el-form-item label-width="80px" label="权限">
            <el-input v-model="permission"/>
          </el-form-item>
          <el-form-item label-width="80px" label="昵称">
            <el-input v-model="name"/>
          </el-form-item>
          <el-form-item label-width="100px" label="创建时间">
            <div class="block">
              <!-- <span class="demonstration">创建日期</span>-->
              <el-date-picker
                v-model="createtime"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>
          </el-form-item>
        </el-form-group>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible=false">取消</el-button>
          <el-button type="primary" @click="sumbmitHandle">确定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "systemUser",
    data() {
      return {
        input: '',
        tableData: [],
        //dialogVisible: false,
        dialogVisible: false,
      /*  computed: {
          depts() {
            var depts = {}

          },*/
          options: [{
            value: '选项1',
            label: '全部'
          }, {
            value: '选项2',
            label: '系统管理'
          }, {
            value: '选项3',
            label: '普通资产'
          }, {
            value: '选项4',
            label: '固定资产'
          }, {
            value: '选项5',
            label: '财务资产'
          }, {
            value: '选项6',
            label: '车辆资产'
          }],
          options1: [{
            value1: '选项1',
            label: '全部'
          }, {
            value1: '选项2',
            label: 'admin'
          }, {
            value1: '选项3',
            label: 'normal'
          }, {
            value1: '选项4',
            label: 'permanent'
          }, {
            value1: '选项5',
            label: 'finance'
          }, {
            value1: '选项6',
            label: 'car'
          }],
          value1: '',
          value: '',
          username: '',
          permission: '',
          name: '',
          createtime: '',
          pickerOptions: {
            shortcuts: [{
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date());
              }
            }, {
              text: '昨天',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit('pick', date);
              }
            }]
          }
        }
      }, mounted()
      {
        var _this = this;
        this.axios({
          url: 'http://127.0.0.1:3000/sysUser/sysUsers',
          method: 'get'
        }).then(function (res) {
          _this.tableData = res.data;
        })
      },methods:{
        btnAddClick()
        {
          this.dialogVisible = true;
        },
        handleClose()
        {
          this.dialogVisible = false;
        },
        sumbmitHandle()
        {
          var _this = this;
          this.axios({

            url: 'http://127.0.0.1:3000/sysUser/sys_add',
            method: 'get',
            params: {
              username: this.username,
              permission: this.permission,
              name: this.name,
              createtime: this.createtime
            }
          }).then(function (res) {
            if (res.data.flag) {
              _this.tableData = res.data.sys;
              _this.$message('添加成功')
              _this.dialogVisible = false;
            } else {
              alert('添加失败');
            }
          })
        }
      }
  }
</script>

<style scoped>
  .select{
    width: 210px
  }
  .button{
    background-color: pink;
  }
</style>

